<template>
  <div>
    <header>
      <van-nav-bar title="购物车" left-text="返回"  left-arrow @click-left="onClickLeft"/>
    </header>

    <section>
      <div class="cart-title"><van-checkbox @click="checkAllFn" :value="isCheckedAll"><span>商品</span></van-checkbox>
      </div>

      <ul>

        <li v-for="(item, index) in list" :key="index">
          <div class="check">
            <van-checkbox @click="checkItem(index)" v-model="item.checked"></van-checkbox>
          </div>

          <h2>
            <img :src="item.g_pic" alt="">
          </h2>

          <div class="goods">
            <div class="goods-title">
              <span>{{ item.g_name }}</span>
              <i @click="delItem(item.id)"><van-icon name="delete-o" /></i>
            </div>
            <div class="goods-price">￥{{ item.g_price }}</div>
            <van-stepper @change='handleChange($event, item)' v-model="item.g_num" integer />
          </div>

        </li>


      </ul>
    </section>

    <footer>
      <!-- @submit="onSubmit" -->
      <van-submit-bar :price="total.price" button-text="提交订单" @submit="goOrder">
        <van-checkbox @click="checkAllFn" :value="isCheckedAll">全选</van-checkbox>
        <div class="num">
          共有<span>{{ total.num }}</span>件商品
        </div>
      </van-submit-bar>
    </footer>

  </div>
</template>

<script>
import { Toast } from 'vant';
import { getCarDetail } from '@/api/car/index'
import { delCarItem } from '@/api/car/index'
import { updateCarItem} from '@/api/car/index'
import { Dialog, Stepper } from 'vant';

import { mapMutations, mapState, mapActions, mapGetters } from 'vuex';

export default {
  data() {
    return {
      checked: true,
    }
  },
  components: {

  },


  computed: {
    ...mapState({
      list: state => state.cart.list,
      selectList: state => state.cart.selectList,
    }),
    ...mapGetters(['isCheckedAll', 'total'])
  },
  created() {
    this.getCarList();
  },

  methods: {
    ...mapMutations(['cartList', 'checkItem']),
    ...mapActions(['checkAllFn']),

    async getCarList() {

      if (!localStorage.getItem('userName')){
        Toast.fail('请先登录');
        this.$router.push({ path: '/login' })
        return 
      }

      const userName = localStorage.getItem('userName')
      // 获取购物车列表

        const res = await getCarDetail(userName);
        console.log(res);

        if (res.status === 200) {
          const data = res.data;

          // 增添checked属性
          data.forEach(v => {
            v['checked'] = true
          });

          this.cartList(data)

        }


       

    },


    onClickLeft() {
      this.$router.push('/home');
    },


    // 图标删除
    async delItem(id) {
      // 提示框

      Dialog.confirm({
        title: '删除',
        message: '您确定要删除这件商品吗？',
        confirmButtonColor: '#58c79d',
      })
        .then(async () => {
          // on confirm
          // 发起请求

          const res = await delCarItem(id)
          console.log(res);

          if (res.status === 200) {
            Toast.success('删除成功');
            // 处理并重新调用获取
            window.location.reload();
          } else {
            Toast.fail(res.message);
          }


        })
        .catch(() => {
          // on cancel
        });


    },

    // 步进器
    async handleChange(value, item) {
      // 发送请求
      const id = item.id;
      const num = value;
      const res = await updateCarItem(id, num)

      if (res.status !== 200){
        Toast.fail('修改失败');
      }
      console.log(res);
      
    },


    // 结算按钮 
    goOrder() {
      // 未有选中的商品，是不存在页面的
      if (this.selectList.length === 0) {
        return Toast('请选择商品');
      }

      // 选中商品跳转订单页面 
      this.$router.push({
        path: '/order',
        query:{
          detail: JSON.stringify(this.selectList)
        }
      });

    }
  },



}
</script>

<style scoped>
section {
  background-color: #f5f5f5;
}

.cart-title {
  display: flex;
  padding: 0.533333rem;
}

.cart-title span {
  padding: 0 0.4rem;
  font-weight: 500;
  font-size: 0.48rem;
}

ul {
  display: flex;
  flex-direction: column;
}

li {
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  padding: 0.16rem 0.533333rem;
  margin: 0.213333rem 0;
  background-color: #fff;
  position: relative;
}

.check {
  padding-right: 0.373333rem;
}

.goods {
  display: flex;
  flex-direction: column;
  padding-left: .4rem;
  font-size: 0.32rem;

}

.goods-title {
  display: flex;
}

.goods-title span {
  font-size: 19px;
  margin-bottom: 10px;
}

i {
  font-size: 20px;
  position: absolute;
  right: 10px;
  top: 10px;
}

.goods-price {
  font-size: 16px;
  padding: 0.08rem 0;
  color: red;
}

::v-deep .van-stepper {
  text-align: right;
  position: absolute;
  right: 18px;
  bottom: 18px;
}


img {
  width: 1.973333rem;
  height: 1.973333rem;
}


.van-submit-bar__bar {
  height: 83px;
  font-size: 19px;
  padding-top: 4px;
}

.van-submit-bar__button {
  width: 127px;
  height: 42px;
}

.num {
  font-size: 15px;
  position: absolute;
  bottom: 7px;
  right: 158px;
}

.num span {
  color: red;
}
</style>